<template>
	<view>
		<searchBtnVue @search="search"></searchBtnVue>
		<view class="pad-0-10">
			<u-tabs :list="listNoticeType" bg-color="none" :current="currentNotice" @change="changeNotice"></u-tabs>
		</view>
		<view class="content">
			<view v-for="(item,index) in listNotice" class="list ">
				<view class="flex-start between list-item" @click="toPage(item)">
					<view class="left">
						<view class="name">{{item.name}}</view>
						<view class="time">{{setCreateTime(item.createTime)}}</view>
					</view>
					<image v-if="item.subName" class="img" :src="hostApi+item.subName"></image>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" @loadmore="loadmore" />
	</view>
</template>
<script>
	import searchBtnVue from '../../../components/Search/searchBtn.vue';
	import {
		noticeSelect
	} from '../../../api/notice';
	import {
		listNoticeType
	} from '../../../utils/listNoticeType';
	import {
		dictionarySelect
	} from '../../../api/dictionary';
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		dateFormat
	} from '../../../utils/assist';
	export default {
		components: {
			searchBtnVue
		},
		data() {
			return {
				name: '',
				list: [],
				listTemp: [], //装查询出的数据
				baseURL: '',
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '加载更多...',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				page: 1,
				size: 10,
				listNoticeType: listNoticeType,
				currentNotice: 0,
				listNotice: [], //呈现的公告
				type: '', //默认type类型,根据type类型查询出公告是显示哪一个
			}
		},
		computed: {
			...mapGetters(['hostApi', "userInfo"])
		},
		onLoad(e) {
			if (e) {
				this.type = parseInt(e.type)
			}
		},
		mounted() {
			this.baseUrl = this.hostApi;
			this.getNoticeType();
		},
		methods: {
			getNoticeType() {
				dictionarySelect({
					code: 'listNoticeType',
					status: 1,
					orderBy: 'sort'
				}).then(res => {
					if (res.length > 0) {
						this.listNoticeType = []
						res.forEach(item => {
							this.listNoticeType.push({
								name: item.typeName,
								type: item.type
							})

						})
						// 根据type传递的类型，显示第几项
						for (var i = 0; i < res.length; i++) {
							if (res[i].type == this.type) {
								this.currentNotice = i;
								break;
							}
						}
						this.init()
					}
				})
			},
			init() {
				// 公告类型 1医院公告 2健康咨询 3就医指南
				noticeSelect({
					name: this.name,
					type: this.listNoticeType[this.currentNotice].type,
					status: 1,
					page: this.page,
					size: this.size
				}).then(res => {
					if (res.length == 0) {
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
						this.listNotice = [...this.listNotice, ...res];
					}
				})
			},
			search(e) {
				this.list = []
				this.page = 1
				this.name = e;
				this.init()
			},
			toPage(item) {
				uni.navigateTo({
					url: `/pages/Home/Notice/detail?item=` + JSON.stringify(item)
				})
			},
			loadmore() {
				this.page = this.page + 1
				this.init();
			},
			changeNotice(e) {
				this.listNotice = []
				this.page = 1
				this.size = 10
				this.currentNotice = e;
				this.init();
			},
			setCreateTime(date) {
				return dateFormat("yyyy-MM-dd", new Date(date))
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		padding: 10px;

		.list {

			.list-item {
				padding: 10px;
				box-shadow: 0 5px 1000px 1rpx #e0e2e7;
				background-color: white;
				margin: 16rpx 0;
				border-radius: 10px;

				.left {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;


					.name {
						color: rgb(84, 84, 84);
						font-weight: bold;
					}

					.time {
						color: rgb(141, 141, 141);
					}
				}
			}

			.img {
				width: 100px;
				height: 50px;
				border-radius: 16rpx;
			}
		}


	}
</style>